<template>

  <div class="header" id="header">
    <div class="logo_layer">
      <img class="logo" alt="" src="/newbyte/logo.png">
    </div>
    <div>
      <img class="banner" id="banner" alt="banner" src="/newbyte/banner.jpg">
    </div>

    <div class="ad">
      <div class="h1">后台系统登录</div>
      <div class="h2">纽百特，致力于软件开发和数据技术，为客户创造价值，“承诺，专注，开放，共识，共赢”是我们核心价值观。纽百特，全球领先的软件服务商，为你，为我！</div>
    </div>
    <div class="login-layer">
      <div class="span-content">
        <span class="span-title" id="login-title" style="border-bottom-color: rgb(74, 144, 226);">
          登录
        </span>
        <span class="span-title" id="register-title">
          注册
        </span>
      </div>
        <div class="login-content" id="login-content">
          <el-form label-width="70px" style="width: 90%;" ref="ruleFormRef" model="form">
            <el-form-item label="用户名">
              <el-input v-model="form.username"/>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()" :loading="loading">登录</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>



  </div>

  <div class="price">
    <div class="h1">我们的价值观</div>
    <div class="h2">承诺，专注，开放，共识，共赢</div>
  </div>
  <div class="footer">
    <a class="h1" href="http://www.newbyte.ltd/">©2019-2022  西安纽百特科技有限公司.</a>
  </div>
</template>

<script>
export default {
  ruleFormRef: "",
  name: "LoginView",
  data() {
    return {
      loading:false,
      value: "",
      form: {
        username: "",
        password: ""
      },
    }
  },
  methods: {
    async submitForm() {

      this.loading=true;
      console.info(this.form)
      let user = await this.$http.form("/user/login", this.form);
      console.info(user)


      if (user.code === 200) {
        if (user.data.sessionId) {
          this.$tool.data.set("sessionId", user.data.sessionId);
        }
      } else {
        this.loading=false;
        this.$message.error(user.msg);
        return false;
      }
      let curUser = await this.$http.form("/user/current", {});
      if (curUser.code === 200) {
        this.$tool.data.set("user_info", curUser.data);
      }

      ///menuByKey menu
      let menu = await this.$http.form("/user/tree", { });
      console.info(menu);
      this.$tool.data.set("menu", menu.data)
      this.$tool.data.set("indexPath", "/home");

      this.loading=false;

      this.$router.push({
        path: "/home",
      });
      this.$message.success("Login Success 登录成功");
      this.islogin = false;


    },
    resetForm() {
      this.$refs.ruleFormRef.resetFields();
    }
  },
}
</script>

<style scoped lang="scss">
.header {
  position: relative;
  margin: 0px;
  padding: 0px;
  min-height: 300px;
}

body {
  margin: 0px;
  padding: 0px;
}


.logo_layer {
  position: absolute;
  z-index: 100;
}

.logo {
  width: 200px;
  margin-top: 30px;
  margin-left: 150px;
}

.ad {
  position: absolute;
  z-index: 200;
  left: 150px;
  bottom: 130px;
}

.ad .h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 56px;
  margin-bottom: 30px;
  color: #FFFFFF;
}

.ad .h2 {
  width: 460px;
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 36px;
}

.banner_layer {
  position: absolute;
  z-index: 0;
  width: 100%;
}

.login-layer {
  position: absolute;
  z-index: 110;
  right: 0px;
  bottom: -50px;
  width: 350px;
  height: 318px;
  background: #FFFFFF;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.11);
  border-radius: 10px;
  margin-right: 150px;
}

.banner {
  width: 100%;
}


.span-content {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2.8rem;
  box-sizing: border-box;
}

.span-content span {
  border-bottom: 1px solid transparent;
}

.span-title {
  display: block;
  color: #666666;
  width: 5rem;
  padding: 0.8rem;
  font-size: 0.8rem;
  text-align: center;
}

.input {
  display: block;
  width: 300px;
  height: 2.9rem;
  border-radius: 2rem;
  border: 1px solid #c8c8c8;
  padding: 1rem;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 1.8rem;
  margin-left: auto;
  margin-right: auto;
}

.input::-webkit-input-placeholder {
  font-size: 0.6rem !important;
  color: #999999 !important;
}

.input-btn {
  padding: 0;
  background: #4a90e2;
  color: #FFFFFF;
  border: none;
  font-size: 1.1rem;
  /*line-height: ;*/
}

.price {
  padding-top: 25px;
  padding-left: 150px;
  background: #F6F8FA;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
  margin-top: -5px;
}

.price .h1 {
  font-size: 30px;
  font-weight: 400;
  color: #333333;
  line-height: 45px;
}

.price .h2 {
  font-size: 15px;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
}

.footer {
  padding-top: 18px;
  padding-left: 150px;
  width: 100%;
  box-sizing: border-box;
}


.footer .h1 {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 30px;
  text-decoration: none;
}
</style>
